<template>
  <PublicPage>
    <view class="px-4 py-6 border-0 border-b border-solid border-zinc-200">
      <view class="grid grid-cols-3 gap-4">
        <view v-for="(item, index) in menus" :key="index" @click="item.clickFn">
          <view class="py-2.5 text-center rounded-xl" :style="item.bgColor">
            <image :src="item.icon" class="w-7 h-7" />
          </view>
          <view class="pt-2 text-center fz-12">{{ item.text }}</view>
        </view>
      </view>
    </view>

    <view class="p-3">
      <view class="flex justify-between py-2">
        <view class="relative font-bold">
          <text>消息</text>
          <!-- <up-badge :customStyle="{position: 'absolute', top: '-8rpx', left: '60rpx'}" type="error " max="99" shape="horn" :value="messages.length"></up-badge> -->
        </view>
        <view class="flex items-center u-tips-color">
          <!-- <text class="pr-2">全部</text>
          <i class="iconfont u-tips-color fz-12">&#xe60d;</i> -->
        </view>
      </view>
      <view>
        <view v-for="(msg,idx) in messages" :key="idx" class="flex items-center my-5">
          <image :src="msg.icon" class="w-12 h-12" />
          <view class="flex-1 pl-2">
            <view class="flex justify-between">
              <view>{{ msg.title }}</view>
              <view class="fz-12 u-tips-color">{{ msg.sendTime }}</view>
            </view>
            <view class="pt-1 fz-12 u-tips-color">{{ msg.desc }}</view>
          </view>
        </view>

        <Empty v-if="!messages.length" :type="4" />
      </view>
    </view>

    <ShareCode ref="ShareCode" title="邀请医生关注" />
  </PublicPage>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import ShareCode from "@/components/shareCode.vue";
import icon_share from '@/static/image/icon/icon_share.png'
import icon_hospital from '@/static/image/icon/icon_hospital.png'
import icon_doctor from '@/static/image/icon/icon_doctor.png'
import icon_statistics from '@/static/image/icon/icon_statistics.png'
import Empty from "@/components/empty.vue";
import { useMsgStore } from "@/stores/msg";

// import icon_union from '@/static/image/icon/icon_union.png'
// import icon_vector from '@/static/image/icon/icon_vector.png'

const _that = getCurrentInstance();
const menus = ref([
  {
    bgColor:
      'background: linear-gradient(163.35deg, #9CF3E6 4.03%, #26C5A6 79.7%, #26C5A6 79.7%);box-shadow: 0px 8px 14px 0px #96FFEB80;',
    text: '邀请关注公众号',
    icon: icon_share,
    clickFn: () => {
      console.log(_that);
      
      (_that?.refs.ShareCode as any).open();
    }
  },
  {
    bgColor:
      'background: linear-gradient(141.61deg, #C2D6FF -8.65%, #7FA1FF 97.27%);box-shadow: 0px 8px 14px 0px #ACC2FF80;',
    text: '基层医疗机构管理',
    icon: icon_hospital,
    clickFn: () => {
      uni.$u.route({
        type: 'navigateTo',
        url: '/pages/organization/organization'
      })
    }
  },
  {
    bgColor:
      'background: linear-gradient(136.57deg, #FDD278 -10.49%, #FFB648 97.12%);box-shadow: 0px 8px 14px 0px #FBDEB380;',
    text: '医生管理',
  icon: icon_doctor,
    clickFn: () => {
      uni.$u.route({
        type: 'navigateTo',
        url: '/pages/expert/expert'
      })
    }
  },
  {
    bgColor:
      'background: linear-gradient(136.57deg, #FDD278 -10.49%, #FFB648 97.12%);box-shadow: 0px 8px 14px 0px #FBDEB380;',
    text: '开单统计',
    icon: icon_statistics,
    clickFn: () => {
      uni.$u.route({
        type: 'navigateTo',
        url: '/pages/statistics/statistics'
      })
    }
  }
]);

const msgStore = useMsgStore();
const { messages } = storeToRefs(msgStore);

onLoad(() => {})
</script>

<style lang="scss" scoped></style>
